<template>
  <div
    class="screen-card"
    :style="{
      width: width,
      height: height,
      background: `url(${cardBg}) no-repeat`
    }"
  >
    <div class="card-header">
      <span class="card-title">{{ title }}</span>
      <img
        class="card-icon"
        src="@/assets/imgs/screen/dataScreen-title.png"
        alt="卡片图标"
      />
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import ltImg from '@/assets/imgs/screen/dataScreen-main-lt.png'
defineProps({
  width: {
    type: String,
    default: '391px'
  },
  height: {
    type: String,
    default: '321px'
  },
  cardBg: {
    type: String,
    default: ltImg
  },
  title: {
    type: String,
    default: '实时游客统计'
  }
})
</script>

<style lang="scss" scoped>
.screen-card {
  width: 391px;
  height: 321px;
  background-size: cover !important;

  .card-header {
    height: 54px;
  }

  .card-body {
    height: calc(100% - 54px);
  }

  .card-title {
    display: block;
    line-height: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
  }

  .card-icon {
    width: 68px;
    height: 7px;
  }
}
</style>
